<template>
	<el-form :inline="true" ref="refAddCaseForm" :model="formInlineCase" size="mini" :rules="rules" label-width="100px">
		<el-row>
			<el-col :span="24" :xs="20" :sm="20" :md="20" :lg="20" :xl="20" class="mb15">
				<el-form-item label="案件名称" prop="caseName" style="width: 100%">
					<el-input v-model="caseName" placeholder="请输入..."></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12" :xs="10" :sm="10" :md="10" :lg="10" :xl="10" class="mb15">
				<el-form-item label="文书编号" prop="caseNo">
					<el-input v-model="caseNo" placeholder="请输入..."></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12" :xs="10" :sm="10" :md="10" :lg="10" :xl="10" class="mb15">
				<el-form-item label="案件性质" prop="inspectionNo">
					<el-select filterable v-model="inspectionNo" placeholder="请选择...">
						<el-option v-for="item in ajxz" :key="item.value" :label="item.label" :value="item.label"> </el-option>
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12" :xs="10" :sm="10" :md="10" :lg="10" :xl="10" class="mb15">
				<el-form-item label="案件类别" prop="caseTypeCode">
					<el-select filterable v-model="caseTypeCode" placeholder="请选择...">
						<el-option v-for="item in ajlbs" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12" :xs="10" :sm="10" :md="10" :lg="10" :xl="10" class="mb15">
				<el-form-item label="案发时间">
					<el-date-picker v-model="caseTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" type="date" placeholder="请选择...">
					</el-date-picker>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12" :xs="10" :sm="10" :md="10" :lg="10" :xl="10" class="mb15">
				<el-form-item label="主办干警" prop="hostUserName">
					<el-select filterable allow-create v-model="hostUserName" placeholder="请选择...">
						<el-option v-for="item in tqrs" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12" :xs="10" :sm="10" :md="10" :lg="10" :xl="10" class="mb15">
				<el-form-item label="主办单位" prop="hostUserOrganName">
					<el-select filterable allow-create v-model="hostUserOrganName" placeholder="请选择...">
						<el-option v-for="item in tqdws" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" :xs="20" :sm="20" :md="20" :lg="20" :xl="20" class="mb15">
				<el-form-item label="案发地点">
					<el-input v-model="casePlace" placeholder="请输入..."></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" :xs="20" :sm="20" :md="20" :lg="20" :xl="20" class="mb15">
				<el-form-item label="简要案情" style="width: 100%">
					<el-input v-model="briefCase" type="textarea" placeholder="请输入..."></el-input>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { initDic } from '/@/common';
export default defineComponent({
	name: 'addCase',
	props: {
		formInline: Object,
		options: Array,
	},
	activated() {
		this.formInlineCase = this.$props.formInline;
		this.formInlineCase.caseTime = new Date();
	},
	setup(props) {
		const state = reactive({
			rules: {
				caseName: [
					{
						required: true,
						message: '请输入案件名称',
						trigger: 'change',
					},
				],
				caseNo: [
					{
						required: true,
						message: '请输入文书编号',
						trigger: 'change',
					},
				],
				inspectionNo: [
					{
						required: true,
						message: '请选择案件性质',
						trigger: 'change',
					}], 
					caseTypeCode: [
					{
						required: true,
						message: '请选择案件类别',
						trigger: 'change',
					}],
					hostUserName: [
					{
						required: true,
						message: '请选择主干民警',
						trigger: 'change',
					}],
					hostUserOrganName: [
					{
						required: true,
						message: '请选择主办单位',
						trigger: 'change',
					}],
			},
		});
		const refAddCaseForm = ref();
		const formInlineCase = props.formInline;
		formInlineCase.caseTime = new Date();
		let options1 = props.options;
		if (!options1) {
			options1 = {
				tqrs: [],
				tqdws: [],
				ajlbs: [],
				ajxz:[],
			};
			initDic(options1);
		}
		return {
			state,
			formInlineCase,
			options1,
			refAddCaseForm,
			...toRefs(options1),
			...toRefs(formInlineCase),
			...toRefs(state),
		};
	},
});
</script>

<style scoped>
.el-col {
	border: 0px solid red;
}
.el-form-item,
.el-select,
.el-date-picker {
	width: 100%;
}
</style>
